<template>
  <section
      v-loading="loading"
      class="section-task-details">
    <div>
      <header class="section-task-header">
        <div class="task-form-item">
          <el-button
              @click="submitDataHandler"
              type="primary"
          >立即提交审核
          </el-button>
        </div>
        <div class="task-form-item">
          <el-button
              @click="batchCancelHandler(true)"
              type="primary">批量取消定时
          </el-button>
        </div>
        <div class="task-form-item">
          <el-button
              @click="updAuditStatusHandler"
              type="primary">查看审核状态
          </el-button>
        </div>
        <!--      <div class="task-form-item">-->
        <!--        <el-checkbox>勾选所有媒体账号的全部广告计划</el-checkbox>-->
        <!--      </div>-->
        <!--      <div class="task-form-item">所有账号广告组数量：<span class="primary-text">10</span></div>-->
        <!--      <div class="task-form-item">定时任务数：<span class="primary-text">100</span></div>-->
        <!--      <div class="task-form-item">提交成功：<span class="success-text">30</span></div>-->
      </header>
      <div class="table-count">
        <div class="task-detail-header">
          <div class="task-form-item">
            <el-checkbox
                :indeterminate="tableData.indeterminate"
                v-model="tableData.checkAll"
                :disabled="tableData.disabled"
            >勾选此账户的全部广告组
            </el-checkbox>
            (已勾选{{ tableData.selectGroupCount }}个广告)
          </div>
          <div class="task-form-item">{{ tableData.advertiser_alias }}</div>
          <div class="task-form-item">广告系列：<span class="primary-text">{{
              tableData.planCount
            }}</span></div>
          <div class="task-form-item">
            广告组：<span class="primary-text">
            {{ tableData.groupCount }}
             </span>
            <span>
               (
              待提交：<i class="primary-text">{{ tableData.pendingCount }}</i> &nbsp;
              定时任务：<i class="primary-text">{{ tableData.timedCount }}</i>&nbsp;
              <!--              已提交数量：<i class="primary-text">{{ 4 }}</i>&nbsp;-->
              提交成功：<i class="primary-text">{{ tableData.successCount }}</i>&nbsp;
              提交失败：<i class="primary-text">{{ tableData.failedCount }}</i>
              )
          </span>
          </div>
        </div>
        <DetailsTable
            :rowDataLists="tableRowLists"
            :data="tableData"
            @batchCancelHandler="batchCancelHandler"
            @delTask="delTask"
        />
      </div>
    </div>
  </section>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
} from 'vue';

import {
  useRoute,
  useRouter
} from 'vue-router';
import {ElMessage, ElMessageBox} from 'element-plus';
import debounce from 'lodash/debounce'
import cloneDeep from 'lodash/cloneDeep'
// import data from './data.json'
import DetailsTable from './DetailsTable'

import {
  checkTaskStatus,
  cancelSubmitTask,
  delSubmitTask,
  getTaskDetails,
} from '@/api/gg/platform-adtask';
import {
  programmaticCreateAd
} from '@/api/gg/programmed';

import {
  isString,
  isBoolean
} from "@utils/types";
import {data} from './data.json'

export default defineComponent({
  name: 'AdTaskDetails',
  components: {
    DetailsTable,
  },
  /* beforeRouteEnter(to, from, next) {
     !to.query.id ? next({name: 'PlatformKuaishouAdvertising'}) : next();
   },*/
  setup() {
    const task_id = 133
    const initVal = () => {
      return {
        // 半选状态
        indeterminate: computed(() => {
          const checkedList = state.tableData.campaign_list.filter(item => item.checked || item.indeterminate);
          // let mark = !state.tableData.campaign_list.every(parent => parent.adset_list.every(unit => unit.checked))
          let mark = !state.tableData.campaign_list.every(parent => parent.adset_list.every(adset => {
            return adset.ad_list.every(ad => ad.checked)
          }))
          return !!checkedList.length && mark
        }),
        campaign_list: [],
        checkAll: computed({
          get() {
            const checkedList = state.tableData.campaign_list.filter(item => item.checked);
            // return !!checkedList.length && checkedList.length === state.tableData.campaign_list.length
            return checkedList.length === state.tableData.campaign_list.length
          },
          set(v) {
            state.tableData.campaign_list.forEach(parent => {
              if (!parent.disabled) {
                parent.adset_list.forEach(adset => {
                  adset.ad_list.forEach(ad => {
                    if (!ad.disabled) ad.checked = v;
                  })
                });
                let checked = parent.adset_list.filter(item => {
                  return item.ad_list.some(ad => ad.checked)
                }).length
                let disabled = parent.adset_list.filter(item => {
                  return item.ad_list.some(ad => !ad.disabled)
                }).length
                let mark = !parent.adset_list.every(item => {
                  return item.ad_list.every(ad => ad.checked)
                })
                parent.checked = checked === disabled
                //半选状态
                parent.indeterminate = v ? mark : false
              }
            })
          },
        }),
        // 广告计划数量
        planCount: 0,
        // 定时任务数量
        timedCount: 0,
        // 成功数量
        successCount: 0,
        // 失败数量
        failedCount: 0,
        // 待提交数量
        pendingCount: 0,
        // 广告组数量
        groupCount: 0,
        // 已勾选广告组数量
        selectGroupCount: computed(() => {
          return state.tableData.campaign_list.reduce((p, c) => {
            c.adset_list.forEach(item => {
              item.ad_list.forEach(ad => {
                p += +ad.checked
              })
            })
            return p
          }, 0)
        }),
        disabled: computed(() => state.tableData.campaign_list.filter(item => item.disabled).length === state.tableData.campaign_list.length),
      }
    }
    const state = reactive({
      loading: false,
      tableData: initVal(),
      tableRowLists: [],
      customTableRef: null,
    })
    let elMsg = null
    let isSlowReq = true
    // 规则分配
    const ruleMap = new Map([
      ['materials', '6'],
      ['titles', '7'],
      ['descriptions', '8'],
      // 目前没有
      ['targets', '9'],
      ['landings', '10'],
    ])
    const setTaskId = async () => {
      /*state.loading = true
      let {data} = await getTaskDetails({task_id}).finally(() => {
        state.loading = false;
        isSlowReq = true
      })*/
      // 广告计划数量
      state.tableData = initVal()
      data.campaign_list = data.campaign_list.filter(item => {
        item.adset_list = item.adset_list.filter(adset => adset.ad_list.length)
        return item.adset_list.length
      })
      state.tableData.planCount = data.campaign_list.length
      data.campaign_list.forEach(parent => {
        let disabledLen = 0
        let adLen = 0
        parent.checked = false;
        parent.indeterminate = false;
        parent.adset_list.forEach(adset => {
          state.tableData.groupCount++
          adset.ad_list.forEach(ad => {
            ad.disabled = false;
            ad.checked = false;
            if (ad.submit_status === '定时提交') {
              state.tableData.timedCount++;
            } else if (ad.submit_status === '成功') {
              state.tableData.successCount++;
              ad.disabled = true;
            } else if (ad.submit_status === '失败') {
              state.tableData.failedCount++;
              ad.disabled = true;
            } else if (ad.submit_status === '待提交') {
              state.tableData.pendingCount++;
            }
          })
          disabledLen += adset.ad_list.filter(item => item.disabled).length
          adLen += adset.ad_list.length
        })
        // 禁用的长度和总数据长度
        parent.disabled = adLen === disabledLen
      })
      Object.assign(state.tableData, data);
      state.tableRowLists = state.tableData.campaign_list.reduce((arr, item, aIndex) => {
        item.adset_list.forEach((adset, gIndex) => {
          adset.ad_list.forEach((custom, index) => {
            const span_obj = {
              // campaignList 对应下标
              campaignIndex: aIndex,
              // campaignList下的adset_list 对应下标
              unitIndex: gIndex,
              // campaignList下的adset_list的ad_list对应下标
              customIndex: index
            }
            // [1,2] = 合并1行 ,合并2列 0=不显示
            // console.log(index, gIndex,adset.ad_list.length)
            if (index === 0 && gIndex === 0) {
              // 统计当前adset_list下的ad_list的总数量
              let len = item.adset_list.reduce((p, c) => {
                p += c.ad_list.length
                return p
              }, 0)
              // 按照广告组里所有广告列表数量合并
              span_obj['0'] = [len, 1]
              span_obj['1'] = [len, 1]
              // 按照广告列表 数量合并(adset.ad_list.length)
              span_obj['5'] = [adset.ad_list.length, 1]
              span_obj[ruleMap.get(state.tableData.ft_group_by)] = [adset.ad_list.length, 1]
            } else {
              span_obj['0'] = [0, 0]
              span_obj['1'] = [0, 0]
              // index = 0 代表新的一组
              span_obj['5'] = index === 0 ? [adset.ad_list.length, 1] : [0, 0]
              span_obj[ruleMap.get(state.tableData.ft_group_by)] = index === 0 ? [adset.ad_list.length, 1] : [0, 0]
            }
            arr.push(span_obj)
          })
        })
        return arr
      }, [])
      // console.log(state.tableRowLists)
    }
    setTaskId()
    // 要渲染多少个 tr
    const submitDataHandler = debounce(async () => {
      if (isSlowReq) {
        elMsg && elMsg.close()
        if (!state.tableData.indeterminate && !state.tableData.checkAll) {
          elMsg = ElMessage.warning(`请选择广告组`);
          return;
        }
        let tmpData = cloneDeep(state.tableData);
        Object.keys(tmpData).forEach(k => {
          if (!['campaign_list', 'batch_id', 'advertiser_id', 'task_submit_time'].includes(k)) {
            Reflect.deleteProperty(tmpData, k)
          }
        })
        tmpData.campaign_list.forEach(campaign => {
          Object.keys(campaign).forEach(k => {
            // 移除空值和布尔值 属性
            if ((isString(campaign[k]) && !campaign[k].trim().length) || isBoolean(campaign[k]) || k.startsWith('ft_')) {
              Reflect.deleteProperty(campaign, k)
            }
          })
          campaign.adset_list.forEach(adset => {
            Object.keys(adset).forEach(k => {
              if ((isString(adset[k]) && !adset[k].trim().length) || isBoolean(adset[k]) || k.startsWith('ft_')) {
                Reflect.deleteProperty(adset, k)
              }
            })
            adset.ad_list = adset.ad_list.filter(ad => ad.checked)
            adset.ad_list.forEach(ad => {
              Object.keys(ad).forEach(k => {
                if ((isString(ad[k]) && !ad[k].trim().length) || isBoolean(ad[k]) || k.startsWith('ft_')) {
                  Reflect.deleteProperty(ad, k)
                }
              })
            })
          })
          campaign.adset_list = campaign.adset_list.filter(item => item.ad_list.length)
        })
        tmpData.campaign_list = tmpData.campaign_list.filter(item => item.adset_list.length)
        elMsg = ElMessage.success('提交中请稍等...');
        isSlowReq = false
        let {message} = await programmaticCreateAd([tmpData]).finally(_ => {
          elMsg && elMsg.close()
          isSlowReq = true
        })
        elMsg = ElMessage.success(message);
        updAuditStatusHandler()
      }
    }, 300)

    const batchCancelHandler = debounce(async (mark, index_list) => {
      if (isSlowReq) {
        let params = index_list
        elMsg && elMsg.close()
        if (mark) {
          params = state.tableData.campaign_list.reduce((p, c) => {
            c.adset_list.forEach(item => {
              item.ad_list.forEach(ad => {
                if (ad.checked && ad.submit_status === '定时提交') {
                  p.push({
                    adset_index: item.adset_index,
                    campaign_index: c.campaign_index,
                    ad_index: ad.ad_index,
                  })
                }
              })
            })
            return p
          }, [])
          if (!params.length) {
            elMsg = ElMessage.warning('请选择定时任务');
            return;
          }
        }
        if (Date.now() >= new Date(state.tableData.task_submit_time).getTime()) {
          elMsg = ElMessage.warning('已过定时时间，不能取消');
          return;
        }
        try {
          await ElMessageBox.confirm(
              `该操作不可恢复，确定${params.length === 1 ? '取消该' : '批量取消'}定时任务吗？`,
              '警告',
              {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
              }
          )
          isSlowReq = false
          let {message} = await cancelSubmitTask({
            index_list: params,
            task_id
          })
          elMsg && elMsg.close()
          elMsg = ElMessage.success(message);
          updAuditStatusHandler()
        } catch (e) {
          console.log(e)
        } finally {
          isSlowReq = true
        }
      }
    }, 300)

    const updAuditStatusHandler = debounce(() => {
      if (isSlowReq) {
        isSlowReq = false
        setTaskId()
      }
    }, 300)
    // 删除任务
    const delTask = debounce(async (params) => {
      try {
        await ElMessageBox.confirm(
            `该操作不可恢复，确定删除吗？`,
            '警告',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }
        )
        let {message} = await delSubmitTask({
          ...params,
          task_id
        })
        elMsg && elMsg.close()
        elMsg = ElMessage.success(message);

        updAuditStatusHandler()
      } catch (e) {
        console.log(e)
      }
    }, 300)

    return {
      ...toRefs(state),
      delTask,
      submitDataHandler,
      batchCancelHandler,
      updAuditStatusHandler,
    }
  },
});
</script>

<style lang="scss" scoped>
:deep(.el-table--border th:first-child .cell) {
  padding-left: 10px;
}

:deep(.el-table--border td , .el-table--border th ) {
  border-right: 1px solid #dedede !important;
  border-bottom: 1px solid #dedede !important;
}

:deep(.el-table) {
  display: flex;
  flex-direction: column;
  flex: 1;

  .el-table--border td:first-child .cell,
  .el-table__body tr td:first-child .cell {
    padding-left: 10px;
  }

  td:not(:last-of-type) {
    border-right: 1px solid #f2f2f2;
  }

  .el-table__body-wrapper {
    flex: 1;
    overflow-y: overlay;
  }

  thead.is-group {
    th {
      background: #fff;
    }
  }
}

.section-task-details {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 10px 10px;
  width: 100%;
  height: 100%;
  @include pageSection();
  font-size: 14px;

  .section-task-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
    color: $h1-text-color;

    > .task-form-item {
      & + .task-form-item {
        margin-left: 20px;
      }

      :deep(.el-checkbox__label) {
        color: $h1-text-color;
      }
    }
  }

  .table-count {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #dedede;
  }

  .task-detail-header {
    flex-shrink: 0;
    display: flex;
    padding: 15px 20px;
    color: $h1-text-color;

    > .task-form-item {

      & + .task-form-item {
        margin-left: 20px;
      }

      :deep(.el-checkbox__label) {
        color: $h1-text-color;
      }
    }
  }

  > div {
    display: flex;
    flex-direction: column;
    flex: 1;
    border-bottom: none;
    overflow: hidden;
  }
}

.campaign-name {
  & + .campaign-name {
    margin-top: 1em;
  }

  .strong-text {
    margin-bottom: .25em;
  }
}
</style>

<style lang="scss">
.creative_detail {
  width: auto !important;

  .creative_detail_content {
    max-height: 360px;
    overflow: auto;

    .creative_detail_content_item {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }

      .creative_detail_content_item_title {
        margin-bottom: 10px;
        font-weight: 700;
      }
    }
  }

  .creative_detail_content_material {
    .creative_detail_content_material_item {
      display: inline-block;
      margin-right: 15px;

      &:last-child {
        margin-right: 0;
      }

      .material {
        width: 200px;
        height: 112px;
        text-align: center;
        background: #dedede;
        margin-top: 10px;
        cursor: pointer;

        img, video {
          max-width: 100%;
          max-height: 100%;
        }
      }

      .sticker_styles {
        width: 102px;
        height: 112px;
      }
    }
  }

  .creative_detail_content {
    .creative_detail_slogan_item {
      margin-top: 10px;
    }
  }
}

.layout-header[name="PlatformGoogleAdvertisingTaskDetails"] {
  > .layout-header-menu {
    display: none;
  }
}
</style>
